<style lang="scss" scoped>
	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 50rpx;
	}

	.nav {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		padding-bottom: 10rpx;
		border-bottom: 1px solid #dee2ee;
		background-color: white;
		z-index: 999;
	}

	.top {
		padding: 20rpx 30rpx;
	}

	.box {
		width: 690rpx;
		padding: 30rpx 20rpx;
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0rpx 32rpx 20rpx -20rpx #e6ebf2;
		margin-top: 30rpx;
		line-height: 60rpx;
		position: relative;

		.line {
			width: 100%;

			.f28 {
				width: 50%;
			}
		}

		.line2 {
			>view {
				width: 50%;
			}
		}

		.sbtn {
			width: 184rpx;
			height: 64rpx;
			background: #fffefe;
			border: 2rpx solid #409eff;
			border-radius: 34rpx;
		}

		.imgboxs {
			width: 100%;
			flex-wrap: wrap;

			.imgbox {
				width: 148rpx;
				height: 148rpx;
				border: 2rpx solid #dee2ee;
				border-radius: 10rpx;
				position: relative;
				margin-right: 18rpx;

				.photo {
					width: 100%;
					height: 100%;

				}

				.close {
					position: absolute;
					width: 32rpx;
					height: 32rpx;
					right: -16rpx;
					top: -16rpx;
				}
			}

			.imgbox:nth-child(4n) {

				margin-right: 0rpx;
			}
		}
	}

	.lbtn {
		margin: 60rpx auto;
	}

	.h1 {
		border-left: 6rpx solid #409eff;
		padding: 0 20rpx;
		transform: translateX(-20rpx);
		height: 40rpx;
		line-height: 40rpx;
	}

	.tip {
		width: 140rpx;
	}

	.clock {
		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}

	.paybtn {
		width: 128rpx;
		height: 64rpx;
		border: 2rpx solid #409eff;
		border-radius: 34rpx;
		font-size: 28rpx;
		position: absolute;
		right: 20rpx;
		bottom: 30rpx;
	}

	.footer {
		width: 100%;
		background-color: white;
		position: fixed;
		bottom: 0;
		left: 0;
		border-top: 1px solid #cccccc;
		padding-left: 30rpx;
		padding-right: 30rpx;
		z-index: 100;
		
		.btn {
			width: 690rpx;
			height: 88rpx;
			opacity: 1;
			background: #ffffff;
			border: 2rpx solid #409eff;
			border-radius: 46rpx;
			margin: 30rpx;
		}
	}

	.header {
		color: #98A5B3;
		padding: 0 30rpx;
		width: 100%;
	}

	.footer {
		width: 100%;
		background-color: white;
		position: fixed;
		bottom: 0;
		left: 0;
		border-top: 1px solid #cccccc;
		padding-left: 30rpx;
		padding-right: 30rpx;
		z-index: 100;
	}


	.sbtn {
		width: 176rpx;
		height: 88rpx;
		border: 2rpx solid #dee2ee;
		border-radius: 46rpx;
			margin: 40rpx 0;
	}

	.lbtn {
		width: 484rpx;
		margin: 40rpx 0;
		margin-right: 0;
		
	}
	.lbtn2{
		width: 690rpx;
		height: 88rpx;
		background: #ffffff;
		border: 2rpx solid #409eff;
		border-radius: 46rpx;
		margin: 40rpx auto;
	}
</style>

<template>
	<view class="content">	
			<view class="header between-flex m-top30 f28">
				<view>创建人:{{info.createUser | user}}</view>
				<view>创建时间: {{info.createTime}}</view>
			</view>
			<view class="box ">
				<view class="between-flex m-bottom20">
					<view class="f28 h1 bold textColor">主任务信息</view>
					
				</view>

				<u-line></u-line>
				<view class="gray align-flex ">
					<view class="tip">任务名称</view>
					<view class="textColor ">{{info.taskName}}</view>
				</view>
				
				<view class="gray align-flex ">
					<view class="tip">计划时间</view>
					<view class="textColor ">{{info.planStartDate}} 至 {{info.planEndDate}}</view>
				</view>
				
			</view>
			<view class="header between-flex m-top30 f28">
				<view>创建人:{{taskinfo.createUser | user}}</view>
				<view>创建时间:{{taskinfo.createTime}}</view>
			</view>
			<view class="box ">
				<view class="between-flex m-bottom20">
					<view class="f28 h1 bold textColor">任务信息</view>
					<view class="clock align-flex blue f24" @click="showHistory=true">
						<image src="../../static/images/clock.png" mode=""></image>
						历史流程
					</view>
				</view>
			
				<u-line></u-line>
				<view class="gray align-flex ">
					<view class="tip">任务名称</view>
					<view class="textColor ">{{taskinfo.taskName}}</view>
				</view>
				<view class="gray align-flex ">
					<view class="tip">详细描述</view>
					<view class="textColor ">{{taskinfo.taskDesc}}</view>
				</view>
				<view class="line2 between-flex">
					<view class="gray  align-flex ">
						<view class="tip">责任人</view>
						<view class="textColor ">{{taskinfo.leaderUser | user}}</view>
					</view>
					
				</view>
				<view class="gray flex " v-if="taskinfo.partUser">
					<view class="tip">参与人</view>
					<view class="textColor " style="width:500rpx;">{{taskinfo.partUser.join(',') | users}}</view>
				</view>
				<view class="gray align-flex ">
					<view class="tip">计划时间</view>
					<view class="textColor ">{{taskinfo.planStartDate}} 至 {{taskinfo.planEndDate?taskinfo.planEndDate:'-'}}</view>
				</view>
				<view class="gray align-flex ">
					<view class="tip">预计工时</view>
					<view class="textColor ">{{taskinfo.planDays?taskinfo.planDays+'天':'-'}}</view>
				</view>
			</view>
			
		
		<view class="space"></view>
		<view class="footer between-flex paddingBottom" >
			<view class="sbtn center-flex textColor bold f32" @click="$back()">返回</view>
			<view v-if="role==1||role==2">
				<view class="lbtn"  @click="showSheet=true" v-if="taskinfo.states==1||taskinfo.states==3">操作处理</view>
			</view>
			<view v-if="role==1">
				<view class="lbtn"  @click="restart" v-if="taskinfo.states==4">取消暂停</view>
				<view class="lbtn"  @click="restart" v-if="taskinfo.states==5">重启开启</view>
			</view>
			
		
		</view>
		
		<u-popup mode="bottom" v-model="showHistory" :closeable="true" borderRadius="20">
			<history title="历史流程" :taskId="taskid" :type="2" v-if="showHistory"></history>
		</u-popup>
		<!-- 处理 -->
		<u-popup mode="bottom" v-model="showDispose" :closeable="true" borderRadius="20">
			<dispose v-if="showDispose" :role="role"  :taskId="taskid" :info="taskinfo" @submit="showDispose=false;getinfo()"></dispose>
		</u-popup>
		<!-- 暂停 -->
		<u-popup mode="bottom" v-model="showSuspend" :closeable="true" borderRadius="20">
			<suspend v-if="showSuspend" :taskId="taskid"  @submit="showSuspend=false;getinfo()"></suspend>
		</u-popup>
		<!-- 终止 -->
		<u-popup mode="bottom" v-model="showStop" :closeable="true" borderRadius="20">
			<stop v-if="showStop" :taskId="taskid"  @submit="showStop=false;getinfo()"></stop>
		</u-popup>
		<!-- 转交 -->
		<u-popup mode="bottom" v-model="showRet" :closeable="true" borderRadius="20">
			<ret v-if="showRet" :taskId="taskid" :type="2"  @submit="showRet=false;getinfo()"></ret>
		</u-popup>
		<u-action-sheet :list="action" @click="click" v-model="showSheet"></u-action-sheet>
	</view>
</template>

<script>
	import history from '@/pagesTask/operation/history.vue'
	import dispose from '@/pagesTask/operation/dispose.vue'
	import suspend from '@/pagesTask/operation/suspend.vue'
	import stop from '@/pagesTask/operation/stop.vue'
	import ret from '@/pagesTask/operation/return.vue'
	export default {
		components: {
			history,
			dispose,
			suspend,
			stop,
			ret
		},
		data() {
			return {
				head: this.$head,
				
				showHistory: false,
				hasChild: false,
				showSheet: false,
				action: [{
						text: '处理'
					}, {
						text: '暂停'
					},
					{
						text: '转交'
					},
					{
						text: '终止'
					}
				],
				showDispose: false, //操作处理页
				showSuspend: false,
				showStop: false,
				showRet: false,
				id:0,//主任务ID
				taskid:0,//子任务ID
				info:{},//主任务信息
				taskinfo:{},//子任务信息
				userid: '',
				role: 1, //1负责人2参与人3无权限
			}
		},
		onLoad(e) {
			this.id=e.id
			this.taskid=e.taskid
			this.getinfo()
		},
		methods: {
			getRole() {
				this.userid = this.$getUser().id
				this.userid =Number(this.userid)
				console.log(this.userid,this.taskinfo.leaderUser)
				if (this.info.leaderUser == this.userid) {
					this.role = 1
				}else if (this.taskinfo.leaderUser == this.userid) {
					this.role = 1
				} else if (this.taskinfo.partUser && this.taskinfo.partUser.indexOf(this.userid) != -1) {
					this.role = 2
				} else {
					this.role = 3
				}
				console.log(this.role)
			},
			restart(){
				this.$showloading()
				this.$pop.ajaxPost('/bus/taskInfo/start', {
					taskId	:this.taskid,
					
				}).then((res) => {
					uni.hideLoading()
					if (res.code == 0) {
						this.$msg('操作成功')
						this.getinfo()
					} else {
						this.$msg(res.msg)
					}
				})
				
			},
			getinfo() {
				this.$pop.ajaxPost('/bus/taskInfo/details', {
					id: this.id
				}).then(res => {
					this.info = res.body
					var list=res.body.taskChild
					list.forEach(item=>{
						if(item.id==this.taskid){
							this.taskinfo=item
							this.getRole()
							if(this.role==1){
								this.action = [{
										text: '处理'
									}, {
										text: '暂停'
									},
									{
										text: '转交'
									},
									{
										text: '终止'
									}
								]
							}else if(this.role==2){
								this.action = [{
										text: '处理'
									}
								]
							}
						}
					})
				})
			},
			click(index) {
				console.log(`点击了第${index + 1}项，内容为：${this.action[index].text}`)
				if (index == 0) {
					this.showDispose = true
				} else if (index == 1) {
					this.showSuspend = true
				} else if (index == 2) {
					this.showRet = true
				} else {
					this.showStop = true
				}
			}

		}
	}
</script>
